﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贴吧——全球最大中文社区</title>
<link href="css/tieba_mainpage_body.css" type="text/css" rel="stylesheet"/>
<link href="css/tieba_mainpage_loginbar.css" type="text/css" rel="stylesheet"/>
<script language="javascript">
	function show(id){
		var tab = document.getElementById('tab'+id);
        var content = document.getElementById('content'+id)
	}
	
	var index = 1;
	function showPoster(id){
		
	}
	function autoChange(){
		
	}
	
	window.onload = autoChange;
	
	// 显示“我的贴吧”子菜单
	function showul(obj){
		obj.getElementsByTagName('ul')[0].style = "display:block;width:129px";
        obj.style.border = "1px solid gray";
       

	}
	// 收起“我的贴吧”子菜单
	function hideul(obj){
		obj.getElementsByTagName('ul')[0].style.display = "none";
        obj.style.border = "";
	}
</script>
</head>

<body>
	<div id="loginbar">
    	<ul>
        	<li><font style="color:white"></font><a href="#"><font style="font-weight:bold">我的登录ID</font></a></li><img src="images/baidu_hi.png"/>
            <li><a href="#" class="vbar">|</a></li>
            <li><a href="#">消息</a></li>
            <li><a href="#" class="vbar">|</a></li>
            <li id="itiebali" onmouseover="showul(this)" onmouseout="hideul(this)"><a href="#">我的<font style="font-weight:bold;margin-right:3px;">i</font>贴吧</a>
                <ul id="itieba" style="display:none">
                    <li><a href="#">全部动态</a></li>
                    <li><a href="#"><font style="font-weight:bold;margin-right:3px;">i</font>动态</a></li>
                    <li><a href="#">我的动态</a></li>
                    <li id="bottomli"><a href="#" class="nonehover">加入的贴吧：</a></li>
                    <li><a href="#">旅游</a></li>
                    <li><a href="#" class="nonehoverlink">查看全部>></a></li>
                </ul>
            </li>
            <li><a href="#"><img src="images/downarrow.png" class="arrow"/></a></li>            
            <li><a href="#" class="vbar">|</a></li>
            
            
            <li onmouseover="showul(this)" onmouseout="hideul(this)"><a href="#">我的俱乐部</a>
            	<ul id="tiebaclub">
                	<li id="bottomli">您还没有加入任何俱乐部，快去<a href="#">俱乐部目录</a>逛逛</li>
                    <li>爱谈论什么？您可以<a href="#">创建一个俱乐部>></a></li>
                </ul>
            </li>
            <li><a href="#"><img src="images/downarrow.png" class="arrow"/></a></li>
            <li><a href="#" class="vbar">|</a></li>
            
            
            <li onmouseover="showul(this)" onmouseout="hideul(this)"><a href="#">我的空间</a>
            	<ul id="myblog">
                	<li><a href="#"><font style="font-weight:bold">主页</font></a>&nbsp;|&nbsp;<a href="#">空间装扮</a></li>
                    <li><a href="#"><font style="font-weight:bold">博客</font></a>&nbsp;|&nbsp;<a href="#">写新文章</a></li>
                    <li><a href="#"><font style="font-weight:bold">相册</font></a>&nbsp;|&nbsp;<a href="#">上传照片</a></li>
                    <li><a href="#"><font style="font-weight:bold">好友</font></a>&nbsp;|&nbsp;<a href="#">找新朋友</a></li>
                    <li><a href="#"><font style="font-weight:bold">档案</font></a>&nbsp;|&nbsp;<a href="#">留言板</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="images/downarrow.png" class="arrow"/></a></li>
            <li><a href="#" class="vbar">|</a></li>
            
            <li><a href="百度贴吧登陆遮罩层.html">退出</a></li>
        </ul>
    </div>
    
	<div id="topSearch">
    	<div id="logo"></div>
        <div id="search">
        	<ul>
            	<li><a href="#">新闻</a></li>
                <li><a href="#">网页</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">知道</a></li>
                <li><a href="#">MP3</a></li>
                <li><a href="#">图片</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">空间</a></li>
                <div class="clear"></div>
            </ul>
            <div id="searchDiv">
            <form name="tiebaForm" action="旅游吧主页.html" onsubmit="return true">
            <input type="text" class="searchText" />
            <input type="submit" class="baiduSearch" value="百度一下"/>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">帮助</a>
            </form>
            </div>
            <div id="radioDiv">
            <input type="radio" name="choose"  class="radioStyle" checked="checked"/><font>进入贴吧</font>
            <input type="radio" name="choose"  class="radioStyle"/><font>进入<font style="font-weight:bold;margin-right:3px">i</font>贴吧</font>
            <input type="radio" name="choose"  class="radioStyle"/><font>帖子搜索</font>
        	</div>
        </div>
        <div class="clear"></div>
    </div>
    
    <div id="banner">
    	<img src="images/header_left.png" />
    	<ul>
        	<li>明星</li><img src="images/header_line.png" />
            <li>影视</li><img src="images/header_line.png" />
            <li>社会</li><img src="images/header_line.png" />
            <li>杂谈</li><img src="images/header_line.png" />
            <li>产业</li><img src="images/header_line.png" />
            <li>体育</li><img src="images/header_line.png" />
            <li>游戏</li><img src="images/header_line.png" />
            <li>动漫</li><img src="images/header_line.png" />
            <li>小说</li><img src="images/header_line.png" />
            <li>热图</li>
            <li id="spanli">
            	<span class="blank" style="text-decoration:none;">&nbsp;&nbsp;</span>
            	<span>每日牛吧</span>
                <span>神贴</span>
                <span>爆料台</span>
                <span>热门投票</span>
                <span>自爆秀场</span>
            </li>
        </ul><img src="images/header_right.png" />
        <div class="clear"></div>
    </div>
    
    <!--  内容主体  -->
    <div id="main">
    	<div id="left">
        	<div id="lefttop">
            	<img src="images/tieba_photo.png"/>
            </div>
            <div id="leftbottom">
            	<h3>&nbsp;&nbsp;热门事件吧</h3>
                <p>
                	<font class="coloryellow">中国航母试航</font><font>故宫否认10万封口费</font>
                </p>
                <p>
                	<font class="colorblue">英骚乱最小被捕者11岁</font><font>3D蓝精灵热映</font>
                </p>
                <p>
                	<font class="coloryellow">国足小胜牙买加</font><font>范冰冰回应怀孕传闻</font>
                </p>
                <p>
                	<font>刘若英闪婚</font><font class="coloryellow">欧阳夏丹将上岗新闻联播</font>
                </p>
                <p>
                	<font class="colorblue">台风梅花来袭</font><font>辽宁盖州泥石流抢险</font>
                </p>
            </div>
        </div>
        
        <div id="middle">
        	<h3>&nbsp;&nbsp;贴吧看点<font>头条回顾</font></h3>
        	<div id="middletop">
        		<p>
                	<font>失窃、摔文物又私吞票款 故宫到底还有多少丑事</font>
                </p>
                <p>
                	<a href="#">[故宫国宝摔碎真相]</a>
                    <a href="#">[我分析哥窑被毁谜团]</a>
                    <a href="#">[故宫一件令人震惊往事]</a>
                </p>
                <ul id="middletopleftul">
                	<li><img src="images/listImage.png" class="listImageStyle"/><a href="#">我发现人类爱护动物其实很虚伪 不服的进来说</a></li>
                	<li><img src="images/listImage.png" class="listImageStyle"/><a href="#">震惊一幕：老人坐公交车 物品被女司机扔下车</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">丈夫杀了我俩的亲生女儿，我痛不欲生(多图)</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">《新水浒》霸气当道 看看哪个潘金莲最美貌</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">快女刘忻收到一封血书和一只带血的仿真手</a></li>
                </ul>
                <ul id="middletoprightul">
                	<li><a href="#">2012吧</a></li>
                    <li><a href="#">魔兽世界吧</a></li>
                    <li><a href="#">嵩县吧</a></li>
                    <li><a href="#">八卦吧</a></li>
                    <li><a href="#">快乐女声吧</a></li>
                </ul>
        	</div>
            <div id="middlebottom">
            	<h4>精彩推荐<font>更多精彩</font></h4>
                <ul id="middlebottomleftul">
                	<li><img src="images/listImage.png" class="listImageStyle"/><a href="#">大腕的超囧吃相，无避雷针</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">还珠格格不合理的狗血剧情</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">会说IloveU还能唱歌的狗狗</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">动漫中招人烦的20大女主角</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">我们是快女有什么想问的吗</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">游戏毁掉了爸妈对我的期望</a></li>
                </ul>
                <ul id="middlebottomrightul">
                	<li><img src="images/listImage.png" class="listImageStyle"/><a href="#">揭秘女明星们背后的干爹</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">娱乐圈整过容的男明星(图)</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">世界上难得一见的大怪物</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">登上韩国荧幕的中国电视剧</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">影视剧中一看就崩溃的镜头</a></li>
                    <li><img src="images/listImage.png" class="listImageStyle"/><a href="#">妈妈教给儿子的终极一课</a></li>
                </ul>
            </div>
        </div>
        
        <div id="right">
        	<div id="righttop">
            	<table cellpadding="0" cellspacing="0" border="0">
                	<tr>
                    	<th colspan="2">登陆贴吧</th>
                    </tr>
                    <tr>
                    	<td>用户名：</td>
                        <td><input type="text" name="loginname" id="loginname" class="textStyle"/></td>
                    </tr>
                    <tr>
                    	<td>密&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
                        <td><input type="password" name="password" id="password" class="textStyle"/></td>
                    </tr>
                    <tr>
                    	<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                        <td>
                        	<input type="checkbox" name="loginStatus" id="loginStatus" checked="checked"/>记住我的登陆状态
                        </td>
                    </tr>
                    <tr>
                    	<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                        <td>
                        	<input type="submit" value="登陆" class="submitStyle"/>&nbsp;&nbsp;
                            <a href="#">忘记密码</a>
                        </td>
                    </tr>
                    <tr style="height:10px;">
                    </tr>
                </table>
                <p>
                	<img src="images/leftarrow.png" /><font><a href="#">注册百度帐号</a></font>
                    <img src="images/leftarrow.png" /><font><a href="#">立即创建贴吧、俱乐部</a></font>
                </p>
            </div>
            
            <div id="rightbottom">
            	<h3>
                	<span id="tab1" onmouseover="show(1)">&nbsp;热门直播</span>
                    <span id="tab2" onmouseover="show(2)">&nbsp;热点转贴</span>
                </h3>
                <div id="content1">
                	<ul>
                        <li><span class="yellow">1</span><a href="#">吓死你不是目的，有些事真解释不了</a></li>
                        <li><span class="yellow">2</span><a href="#">准大一学姐，为学弟学妹们答疑解惑</a></li>
                        <li><span class="yellow">3</span><a href="#">真实故事：网恋到结婚，这就是结局？</a></li>
                        <li><span class="gray">4</span><a href="#">高二到高三为理想而奋斗，上海交大</a></li>
                        <li><span class="gray">5</span><a href="#">三年了，我竟然还爱着这个少妇</a></li>
                        <li><span class="gray">6</span><a href="#">那些漂亮的女同学，我们男生伤不起</a></li>
                	</ul>
                </div>
                <div id="content2">
                	<ul>
                        <li><span class="yellow">1</span><a href="#">中国电视剧一看就崩溃十大镜头</a></li>
                        <li><span class="yellow">2</span><a href="#">盘点世界上最坑人的20个谣言</a></li>
                        <li><span class="yellow">3</span><a href="#">优质妖冶的动漫美少年蛊惑你的心</a></li>
                        <li><span class="gray">4</span><a href="#">暑假记得要为开学准备些东西</a></li>
                        <li><span class="gray">5</span><a href="#">我给大家曝光卫生巾制作过程</a></li>
                        <li><span class="gray">6</span><a href="#">盘点好莱坞22位极品"男花瓶"</a></li>
                	</ul>
                </div>
            </div>
        </div>
    </div>
    
    <div id="poster">
    	<div id="poster1"><img src="images/tieba_home_poster/poster1.png" /></div>
        <div id="poster2"><img src="images/tieba_home_poster/poster2.png" /></div>
        <div id="poster3"><img src="images/tieba_home_poster/poster3.png" /></div>
        <div id="poster4"><img src="images/tieba_home_poster/poster4.png" /></div>
        <div id="poster5"><img src="images/tieba_home_poster/poster5.png" /></div>
        <div id="poster6"><img src="images/tieba_home_poster/poster6.png" /></div>
        <div id="poster7"><img src="images/tieba_home_poster/poster7.png" /></div>
    </div>
    
    <div id="bottom">
    	<img src="images/tiebaBottom.png" />
    </div>
</body>
</html>
